<template>
	<view class="addBankCard" >
		<view class="add-card-title-box">
			<view>添加银行卡</view>
			<image src="/static/images/add-card-tip-icon.png" @click="showTips()" mode=""></image>
		</view>
		<view class="card-input-form">
				<view class="card-input-box">
					<view>持卡人姓名</view>
					<input type="text" value="" v-model="real_name" placeholder="请输入姓名" placeholder-style="font-size: 32rpx;color:#999999;" />
				</view>
				<view class="card-input-box">
					<view>银行卡号</view>
					<input type="text" value="" οnkeyup="this.bank_card=this.bank_card.replace(/[, ]/g,'')" v-model="bank_card"  placeholder="持卡人本人储蓄卡号" placeholder-style="font-size: 32rpx;color:#999999;" />
				</view>
				<view class="card-input-box" v-if="bankName!=''">
					<view>银行名称</view>
					<input type="text" :value="bankName" disabled="true" placeholder="" placeholder-style="font-size: 32rpx;color:#999999;" />
				</view>
		</view>
		<view class="confirm-add confirm-add-last" @click="addBankCard()">添加银行卡</view>
		<uni-popup ref="canclePopup" type="center">
			<view class="cancle-add-modal">
				<view class="cancle-add-modal-title">您要放弃添加银行卡吗？</view>
				<view class="cancle-add-modal-operation">
					<view @click="confifmCancle()">放弃</view>
					<view @click="close()">继续添加</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tipsPopup" type="bottom">
			<view class="tips-modal">
				<view class="tips-title">
					<view>温馨提示</view>
					<image src="/static/images/close.png" class="close" @click="closeTips()" mode=""></image>
				</view>
				<view class="support-bank-content">每个账户限绑定一张银行卡，如需更换银行卡请联系客服。</view>
			</view>
		</uni-popup>
	</view> 
</template>
<script>
	
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { addBankCard,getBankInfo } from 'api/userAccountApi'
	export default {
		store,
		computed:{
			...mapGetters([
				'user'
			])
		},
		data() {
			return {
				hasBg:false,
				bank_card:'',
				bankName:'',
				source:'wap',
				bankDate:null,
				real_name:null,
				password:null,
				needSetPayCode:false,
				isAndroid:null
			}
		},
		methods:{
			...mapMutations([
				'setUser'
			]),
			isNull(str) {
					if (str == "") return true;
					var regu = "^[ ]+$";
					var re = new RegExp(regu);
					return re.test(str);
			},
			cancleAddCard(){
				this.$refs.canclePopup.open('center')
			},
			back(){
				this.cancleAddCard()
			},
			confifmCancle(){
				this.$refs.canclePopup.close()
				setTimeout(()=>{
					uni.navigateBack()
				},300)
			},
			close(){
				this.$refs.canclePopup.close('center')
			},
			showTips(){
				this.$refs.tipsPopup.open('bottom')
			},
			closeTips(){
				this.$refs.tipsPopup.close('bottom')
			},
			addBankCard(){
				
				if(!this.real_name){
					uni.showToast({
						icon:'none',
						title:'请输入持卡人姓名！'
					})
				}else if(this.bank_card==''){
					uni.showToast({
						icon:'none',
						title:'请输入正确的银行卡号'
					})
				}else{
					console.log(this.isNull(this.bank_card))
					if(this.isNull(this.bank_card)){
						uni.showToast({
												title: '请输入内容'
											});
											return false;
					}else{
						if(!this.password){
							this.bank_card = this.bank_card.replace(/[, ]/g,'')
							let parms = {
								bank_card:this.bank_card,
								real_name:this.real_name
							}
							addBankCard(parms).then(res=>{
								if(!res.message){
									uni.navigateTo({url: '/packs/pages/withdrawal/withdrawal'})
								}else{
									uni.showModal({
										title:'提示',
										content:Object.values(res.errors)[0][0],
										confirmText:'知道了',
										confirmColor:'#FF6011',
										showCancel:false
									})
								}
							})
						}else{
							this.bank_card = this.bank_card.replace(/[, ]/g,'')
							let parms = {
								bank_card:this.bank_card,
								real_name:this.real_name,
								pay_code:this.password
							}
							addBankCard(parms).then(res=>{
								if(!res.message){
									this.$refs.passwordPopup.open('center')
								}else{
									if(Object.values(res.errors)[0][0]=='请输入交易密码'){
											this.$refs.passwordPopup.open('center')
									}else if(Object.values(res.errors)[0][0]=='请先设置交易密码'){
										this.needSetPayCode = true
										if(this.statusBar>0){
											setPayCodeByApp.postMessage('paycodeset');
										}else{
											uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
										}
									}else{
										uni.showModal({
											title:'提示',
											content:Object.values(res.errors)[0][0],
											confirmText:'知道了',
											confirmColor:'#FF6011',
											showCancel:false
										})
									}
								}
							})
						}
					}
					
				}
			},
			closePop(){
				this.$refs.passwordPopup.close()
			},
			async confirm(){
				this.bank_card = this.bank_card.replace(/[, ]/g,'')
				if(this.password){
					let parms = {
						bank_card:this.bank_card,
						real_name:this.real_name,
						pay_code:this.password
					}
					this.closePop()
					addBankCard(parms).then(res=>{
						this.password = null;
						if(!res.message){
							uni.showToast({
								icon:'none',
								title:'添加成功！'
							})
							setTimeout(()=>{
								if(this.needSetPayCode){
									uni.navigateBack({
										delta: 2
									})
								}else{
									uni.navigateBack({})
								}
							},1000)
						}else{
							if(Object.values(res.errors)[0][0]=='请输入交易密码'){
									this.$refs.passwordPopup.open('center')
							}else if(Object.values(res.errors)[0][0]=='请先设置交易密码'){
								this.needSetPayCode = true
								if(this.statusBar>0){
									setPayCodeByApp.postMessage('paycodeset');
								}else{
									uni.navigateTo({url: '/packs/pages/userset/setpaycode'})
								}
							}else{
								uni.showModal({
									title:'提示',
									content:Object.values(res.errors)[0][0],
									confirmText:'知道了',
									confirmColor:'#FF6011',
									showCancel:false
								})
							}
						}
					})
				}else{
					uni.showModal({
						title:'提示',
						content:'请输入交易密码！',
						confirmText:'知道了',
						confirmColor:'#FF6011',
						showCancel:false
					})
				}
			},
			getBankInfo(){
				
				let parms = {
					bank_card:this.bank_card
				}
				getBankInfo(parms).then(res=>{
					if(res.info.bankName){
						this.bankName = res.info.bankName
					}
				})
			},
			print(e){
				let value = e.detail;
				if(value.value==''){
					this.bankName = ''
				}
			},
			paste(){
				getClipBoardCotentByApp.postMessage('clipBoardCotent');
			},
			pasteByapp(msg){
				if(this.statusBar>0){
					if(msg){
						this.bank_card = msg
					}
				}
			},
			
		},
		async onShow(){
			
		},
		onReady() {
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.hasBg{
		background: #F6F6F6;
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.add-card-title-box{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 42rpx;
		padding-bottom:42rpx;
		>view{
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
		}
		image{
			display: block;
			width: 36rpx;
			height: 36rpx;
			margin-left: 16rpx;
		}
	}
	.addTips{
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
		text-align: center;
		margin: 24rpx 0 48rpx 0;
	}
	.card-input-form{
		width: 660rpx;
		// height: 242rpx;
		padding:0  20rpx;
		background: #FFFFFF;
		margin:0 auto;
		border-radius: 8rpx;
		>view:nth-last-child(1){
			border:none;
		}
	}
	.card-input-box{
		display: flex;
		align-items: center;
		height: 122rpx;
		border-bottom: 1rpx solid #F0F0F0;
		position: relative;
		>view{
			width: 160rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
		>input{
			width: 400rpx;
			width: 350rpx;
			margin-left: 40rpx;
			font-size: 32rpx;
			color: #333333;
		}
		.paste-box{
			width: 104rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background:rgba(24, 119, 255, 0.1);
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #1861F2;
			position: absolute;
			top: 37rpx;
			right:0rpx;
		}
	}
	.confirm-add{
		width: 550rpx;
		height: 96rpx;
		background: #E5E5E5;
		border-radius: 48rpx;
		margin:150rpx auto 80rpx;
		display: flex;
		align-items: center;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 400;
		color: #CCCCCC;
	}
	.confirm-add-last{
		background: #EF8235;
		color:#FFFFFF;
	}
	.cancle-add-modal{
		width: 560rpx;
		height: 242rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
	}
	.cancle-add-modal-title{
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 48rpx;
		padding-top: 52rpx;
		text-align: center;
	}
	.cancle-add-modal-operation{
		display: flex;
		width: 100%;
		height: 86rpx;
		position: absolute;
		left:0;
		bottom: 0;
		border-top: 1rpx solid #F0F0F0;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		>view:nth-child(2){
			font-size: 32rpx;
			font-weight: 500;
			color: #1861F2;
			border-left: 1rpx solid #F0F0F0;
		}
	}
	.tips-title{
		display: flex;
		height: 104rpx;
		align-items: center;
		justify-content: center;
	}
	.tips-modal{
		width: 750rpx;
		height: 540rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}
	.close{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top:30rpx;
		right: 30rpx;
	}
	.support-bank-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
		margin-left: 40rpx;
	}
	.support-bank-content{
		width: 670rpx;
		font-size: 32rpx;
		font-weight: 300;
		color: #666666;
		line-height: 64rpx;
		margin: 16rpx auto 0;
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.password-confirm-modal{
		width: 620rpx;
		height: 300rpx;
		padding:20rpx 0 64rpx 0;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.password-confirm-tips{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		text-align: center;
	}
	.password-confirm-ipt-box{
		width: 528rpx;
		height: 84rpx;
		background: #F6F6F6;
		border-radius:15rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin:30rpx auto;
	}
	.password-confirm-ipt{
		width: 450rpx;
		font-size: 28rpx;
		color: #555555;
	}
	.password-confirm-bottom{
		width: 100%;
		height: 90rpx;
		display: flex;
		border-top: 1rpx solid #cccccc;
		position: absolute;
		left:0;
		bottom: 0;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
		}
		>view:nth-child(1){
			color:#999999;
		}
		>view:nth-child(2){
			color:#FF6011;
			border-left: 1rpx solid #cccccc;
		}
	}
	
</style>
